<!-- Created Time:23/07/26 16:50:25 -->
<!-- Created By: Mande.Huang-->
<!-- Description: -->
<template>
  <div class="home" ref="home">
    <!--  在这里放入所有的window窗口 -->
    <context class="context"></context>
  </div>
</template>

<script>
import Vue from "vue";
import context from "./MacComponents/ContextMenuFile.vue";
import window from "./MacComponents/Macwindow.vue";
import CreatSoft from "./SoftWare/CreatSoft.vue";
import Notepade from "./SoftWare/Notepad.vue";
import TaskManager from "./SoftWare/TaskManager.vue";
import FileExplore from "./SoftWare/FileExplore.vue";
import QQ from "./SoftWare/QQ.vue";
import WeChat from "./SoftWare/WeChat.vue";

const cloneNode_CreatSoft = Vue.extend(CreatSoft);
const cloneNode_QQ = Vue.extend(QQ);
const cloneNode_WeChat = Vue.extend(WeChat);
const cloneNode_Notepad = Vue.extend(Notepade);
const cloneNode_TaskManager = Vue.extend(TaskManager);
const cloneNode_FileExplore = Vue.extend(FileExplore);
const local = require("../MyUtils/localStorage");
export default {
  name: "Home",
  components: {
    window,
    context,
  },
  data() {
    return {
      // 聚焦窗
      focusWindowId: 0,
      windows: [],
      ArrWindow: [],
      postIndex: 0,
      left: 300,
      top: 100,
      softInfo: [],
      ClickClearMenu: null,
      RightClickTarget: null,
    };
  },
  created() {
    this.bus.$on("FolderWindowShow", this.FolderWindowShow);
    this.bus.$on("RightMenuClick", this.RightMenuClick);
    this.bus.$on("opentxtfile", this.opentxtfile);
  },
  mounted() {
    this.RightClick();
    this.ArrWindow.push(cloneNode_FileExplore);
    this.ArrWindow.push(cloneNode_WeChat);
    this.ArrWindow.push(cloneNode_QQ);
    this.ArrWindow.push(cloneNode_CreatSoft);
    this.ArrWindow.push(cloneNode_Notepad);
    this.ArrWindow.push(cloneNode_TaskManager);
    this.bus.$on("opensoft", this.opensoft);
    this.GetWindows();
    this.softInfo = local.GetOpenedSoft();
    local.SetItem(
      "OpenInfo",
      JSON.stringify(this.softInfo),
      this.store,
      this.softInfo
    );
    this.softInfo.forEach((item) => {
      if (item.isShow || item.mini) {
        this.RefreshOpen(item.id, item);
      }
    });
  },
  methods: {
    opentxtfile(textInfo) {
      this.opensoft(4);
    },
    opensoft(id) {
      let softID = 0;
      this.softInfo = local.GetOpenedSoft();
      for (let i = 0; i < this.softInfo.length; i++) {
        if (this.softInfo[i].id == id) {
          // 全场聚焦消失
          this.softInfo.forEach((item) => {
            item.isFocus = false;
          });
          // 软件被打开了
          if (this.softInfo[i].isShow == false) {
            // 软件被打开 但是是最小化
            this.nodeShow(this.softInfo[i], i);
            this.softInfo[i].isShow = true;
            this.softInfo[i].isFocus = true;
            this.softInfo[i].mini = false;
          } else {
            // 软件被打开 且在展示但是没有被聚焦
            this.softInfo[i].isFocus = true;
          }
          local.SetItem(
            "OpenInfo",
            JSON.stringify(this.softInfo),
            this.store,
            this.softInfo
          );
          return;
        }
      }
      const window = new this.ArrWindow[id]({
        propsData: {
          softID: id,
        },
      });
      window.$mount();
      this.$el.appendChild(window.$el);
      window.$el.style.top = this.top + "px";
      window.$el.style.left = this.left + "px";
      window.$el.style.width = 900 + "px";
      window.$el.style.height = 600 + "px";
      this.softInfo.push({
        id: id,
        mini: false,
        max: false,
        isShow: true,
        width: 900,
        height: 600,
        left: this.left,
        top: this.top,
        isFocus: true,
        softName: id,
        isFolder: false,
        path: "Appstore",
      });
      const arr = [
        { top: 20, left: 20 },
        { top: 20, left: 0 },
        { top: 20, left: -20 },
        { top: -20, left: 20 },
        { top: -20, left: 0 },
        { top: -20, left: -20 },
        { top: 0, left: 20 },
        { top: 0, left: 0 },
        { top: 0, left: -20 },
      ];
      this.top += arr[this.postIndex].top;
      this.left += arr[this.postIndex++].left;
      this.postIndex = this.postIndex % 9;
      local.SetItem(
        "OpenInfo",
        JSON.stringify(this.softInfo),
        this.store,
        this.softInfo
      );
      this.softInfo = local.GetOpenedSoft();
      let tl = this.gsap.timeline();
      window.$el.style.opacity = 0;
      tl.to(window.$el, {
        duration: 0.3,
        opacity: 1,
      });
    },
    // 页面被关闭或者刷新之后 软件的信息任然会保留在页面上
    RefreshOpen(id, item) {
      const window = new this.ArrWindow[id]({
        propsData: {
          softID: id,
        },
      });
      window.$mount();
      this.$el.appendChild(window.$el);
      window.$el.style.width = item.width + "px";
      window.$el.style.height = item.height + "px";
      if (item.mini) {
        window.$el.style.scaleX = 0;
        window.$el.style.scaleY = 0;
        window.$el.style.display = "none";
        return;
      }
      window.$el.style.top = item.top + "px";
      window.$el.style.left = item.left + "px";
      window.$el.style.width = item.width + "px";
      window.$el.style.height = item.height + "px";

      let tl = this.gsap.timeline();
      window.$el.style.opacity = 0;
      tl.to(window.$el, {
        duration: 0.3,
        opacity: 1,
      });
    },
    FolderWindowShow(VueInstance) {
      let node = VueInstance.$el;
      node.style.display = "flex";
      this.$el.appendChild(node);
      let tl = this.gsap.timeline();
      tl.to(node, {
        duration: 0.2,
        scaleX: 1,
        scaleY: 1,
      });
    },
    nodeShow(info, index) {
      let node = null;
      for (let i = 0; i < this.$el.childNodes.length; i++) {
        if (this.$el.childNodes[i].__vue__._props)
          if (this.$el.childNodes[i].__vue__._props.softID == info.id) {
            node = this.$el.childNodes[i];
            break;
          }
      }
      node.style.display = "block";
      node.style.opacity = 0;
      let tl = this.gsap.timeline();
      tl.to(node, {
        duration: 0.2,
        opacity: 1,
        scaleX: 1,
        scaleY: 1,
      });
    },
    GetWindows() {
      // 清空
      this.windows = [];
      for (const window of this.$el.children) {
        this.windows.push(window.__vue__);
      }
    },
    RightClick() {
      this.$el.addEventListener("contextmenu", (e) => {
        e.preventDefault(); // 阻止默认的右击菜单弹出
        if (e.target.classList.contains("filecontain")) {
          // 在文件夹里面右键
          this.RightClickTarget = e.target;
          this.showContextmenu(e);
        } else if (e.target.classList.contains("home")) {
          // 在home界面右键
          this.RightClickTarget = e.target;
          this.showContextmenu(e);
        }
      });
    },
    showContextmenu(e) {
      const contextMenu = this.$el.querySelector(".context");
      const ScreenHeight = document.defaultView.innerHeight;
      const ScreenWidth = document.defaultView.innerWidth;
      const rootFontSize =
        12 *
        parseFloat(
          document.defaultView.getComputedStyle(document.documentElement)
            .fontSize
        );
      const ContextHeight = rootFontSize;
      const ContextWidth = rootFontSize;
      contextMenu.style.left = `${e.pageX}px`; // 菜单的横坐标位置
      contextMenu.style.top = `${e.pageY}px`; // 菜单的纵坐标位置
      if (e.pageX > ScreenWidth - 0.8 * ContextWidth) {
        contextMenu.style.left = `${ScreenWidth - 0.8 * ContextWidth}px`; // 菜单的横坐标位置
      }
      if (e.pageY > ScreenHeight - 1.2 * ContextHeight) {
        contextMenu.style.top = `${ScreenHeight - 1.2 * ContextHeight}px`; // 菜单的横坐标位置
      }
      contextMenu.style.display = "block"; // 显示菜单
      this.ClickClearMenu = document.defaultView.addEventListener(
        "click",
        (e) => {
          if (contextMenu.contains(e.target)) {
            document.defaultView.removeEventListener(
              "click",
              this.ClickClearMenu
            );
          }
          contextMenu.style.display = "none"; // 显示菜单
        }
      );
    },
    async RightMenuClick(str) {
      let curfileInfo = JSON.parse(localStorage.getItem("curfileInfo"));
      let data;
      let res;
      switch (str) {
        case 0:
          data = {
            docName: "未命名文件夹",
            fatherId: curfileInfo.id,
            docContain: [],
            fatherName: curfileInfo.docName,
            fileKind: "文件夹",
          };
          res = await this.http.post("/document", data);
          this.bus.$emit("getFileData", curfileInfo);
          break;
        case 1:
          data = {
            filekind: 1,
            iconUrl: "txt.png",
            fatherID: curfileInfo.id,
          };
          res = await this.http.post("/textfile", data);
          this.bus.$emit("getFileData", curfileInfo);
          break;
        case 2:
          break;
        case 3:
          break;
        case 4:
          break;
        case 5:
          break;
        default:
          break;
      }

      document.defaultView.removeEventListener("click", this.ClickClearMenu);
      const contextMenu = this.$el.querySelector(".context");
      contextMenu.style.display = "none";
    },
  },
};
</script>
<style lang="scss" scoped>
.home {
  height: 100vh;
  .context {
    position: absolute;
    display: none;
  }
}
</style>
